<template>
  <div class="bindcard">
    <vmask v-show="maskShow"></vmask>
    <vheader pageTitle="银行卡管理"></vheader>
    <div class="bindcard-list">
      <mt-cell-swipe v-for="(card, index) in bindedCards"
        key="index"
        :right="getRight(card, index)">
        <img class="icon-err" :src="card.bankImage"></img>
        <p>{{ card.bankName }}{{ card.bankCardNo }}</p>
      </mt-cell-swipe>
    </div>
    <div @click="addBankCard" class="bindcard-btn">
      <span class="icon-add"></span>
      <span>添加银行卡</span>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import { CellSwipe, Toast } from 'mint-ui'
  import popUp from 'components/common/popup/popup.js'
  import vmask from 'components/common/mask'

  export default {
    data () {
      return {
        bindedCards: [],
        maskShow: false,
        currentCard: null,
        currentIndex: null
      }
    },
    methods: {
      addBankCard () {
        // 实名认证后才能绑定银行卡
        if (this.$store.state.user.openAcctStatus === '1') {
          this.$router.push('/addBankCard')
        } else {
          Toast('实名认证后才能绑定银行卡~')
        }
      },
      delete (card, index) {
        const cardNo = card.bankCardNo
        this.maskShow = true
        const vm = this
        this.currentCard = card
        this.currentIndex = index
        console.log(card)
        const popup = popUp({
          type: 'confirm',
          positiveText: '确定',
          negtiveText: '取消',
          innerHtml: `<p style="text-align: center">确定要<strong style="color: #ff4133">删除</strong>卡号为<p/>
                      <p style="text-align: center">${cardNo}的银行卡么？<p/>`
        })
        popup.positive = () => {
          const acctKey = this.$cookie.get('acctKey')
          vm.maskShow = false
          vm.$http.post('/api/member/memberBank/delete', `uuid=${vm.currentCard.uuid}&acctKey=${acctKey}`)
          .then((res) => {
            if (res.data.success) {
              Toast('删除成功')
              vm.bindedCards.splice(vm.currentIndex, 1)
            } else {
              this.maskShow = false
              Toast('删除失败,' + res.data.msg)
            }
          })
          .catch((err) => {
            console.log(err)
            popup.close()
            vm.maskShow = false
          })

          popup.close()
        }
        popup.negtive = () => {
          console.log(vm.currentCard, vm.currentIndex)
          popup.close()
          vm.maskShow = false
          return
        }
      },
      getRight (card, index) {
        return [
          {
            content: '删除',
            style: { background: 'red', color: '#fff' },
            handler: () => this.delete(card, index)
          }
        ]
      }
    },
    created () {
      const userAcctKey = this.$cookie.get('acctKey')
      this.$http.get(`/api/member/memberBank/list?acctKey=${userAcctKey}&platformType=1`)
        .then((res) => {
          console.log(res)
          if (res.data.success) {
            console.log(this.bindedCards)
            this.bindedCards = res.data.data.list
          }
        })
        .catch((err) => {
          console.log(err)
          console.log(this.bindedCards)
        })
    },
    components: {
      vheader,
      mtCellSwipe: CellSwipe,
      vmask,
      Toast
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .bindcard {
    font-size: 32px;
    .mint-cell-title {
      flex: 0 ! important;
    }
    .mint-cell-wrapper {
      padding: 0 !important;
      height: 100%;
    }
    .mint-cell {
      height: 108px !important;
    }
    .mint-cell-swipe-button {
      line-height: 108px;
    }
    &-list {
      img {
        width: 45px;
        margin: 0 20px 0 30px;
      }
    }
    &-btn {
      color: $base-ff6c00;
      padding-left: 30px;
      padding-top: 30px;
      user-select: none;
      font-size: 30px;
      span {
        &:nth-child(1) {
          font-size: 30px;
          margin-right: 10px;
        }
        &:nth-child(2) {
          color: $base-333;
        }
      }
    }
  }
</style>
